<template>
    <div id="Diaries">
       <!-- 搜索栏 -->
       <el-card id="search">
            <el-row>
                <el-col :span="20">
                    <el-input placeholder="创建日期" v-model="searchModel.createDate" type="date" style="width: 200px;" class="filter-item"></el-input>
                    <el-input placeholder="标题"     v-model="searchModel.title" style="width: 200px;" class="filter-item"></el-input>
                    <el-input placeholder="标签"     v-model="searchModel.tags" style="width: 200px;" class="filter-item"></el-input>
                    <el-input placeholder="心情"     v-model="searchModel.mood" style="width: 200px;" class="filter-item "></el-input>
                   
                    <el-button @click="getDiariesList()" type="primary" round   icon="el-icon-search">查询</el-button>
                </el-col>
                <el-col :span="3"> <!-- span  3  左右位置 -->
                <el-button @click="openEditUI(null)" type="primary" icon="el-icon-plus" circle></el-button>
                </el-col>
            </el-row>
        </el-card>

         <!-- --------------------------------------------结果列表 --------------------------------->
        <el-card>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
            <el-table-column  label="序号">
            <template v-slot="scope">
                {{ (searchModel.pageNo-1)*searchModel.pageSize + scope.$index + 1 }}
            </template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建日期"  :labelWidth="formLabelWidth"></el-table-column>
                <el-table-column prop="title" label="标题" :labelWidth="formLabelWidth"></el-table-column>
                <el-table-column prop="tags" label="标签" :labelWidth="formLabelWidth"></el-table-column>
                <el-table-column prop="mood" label="心情"  :labelWidth="formLabelWidth"></el-table-column>
                <el-table-column prop="content" label="内容" :labelWidth="formLabelWidth"></el-table-column>
                <el-table-column prop="majorEvent" label="大事件" :labelWidth="formLabelWidth"></el-table-column>
                <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openEditUI(scope.row.id)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-card>
        <!-- --------------------------------------------结果列表 --------------------------------->
      <!--分页组件 -->
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.pageNo"
        :page-sizes="[5,10,20,50]"
        :page-size="searchModel.pageSize"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
         <!--分页组件 -->
         <!-- 新增标签弹层 -->
        <el-dialog title="新增" :visible.sync="dialogFormVisible">
            <el-form ref="DiariesFormRef" :model="formData"  :rules="rules" label-position="right" label-width="100px">
                    <el-row>
                              <el-col :span="12">
                                  <el-form-item label="创建日期" prop="createDate">
                                      <el-input v-model="formData.createDate" type="date"></el-input>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="12">
                                <el-form-item label="标题" prop="title">
                                    <el-select v-model="formData.title">
                                        <el-option label="日常" value="日常"></el-option>
                                        <el-option label="健康" value="健康"></el-option>
                                        <el-option label="学习" value="学习"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="标签">
                                    <el-select v-model="formData.tags">
                                        <el-option label="MR" value="MR"></el-option>
                                        <el-option label="DQ" value="DQ"></el-option>
                                    </el-select>
                                </el-form-item>

                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="心情">
                                    <el-select v-model="formData.mood">
                                        <el-option label="开心" value="开心"></el-option>
                                        <el-option label="不开心" value="不开心"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="内容">
                                    <el-input v-model="formData.content" type="textarea" :rows="2"  style="width: 100%; height: 100px; font-size: 16px; padding: 10px; border-radius: 4px;" ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="大事件">
                                    <el-input v-model="formData.majorEvent" type="textarea" :rows="2"  style="width: 100%; height: 100px; font-size: 16px; padding: 10px; border-radius: 4px;" ></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <!-- <el-button @click="dialogFormVisible = false">取消</el-button> -->
                    <el-button @click="cancel()">取消</el-button>
                    <el-button type="primary" @click="saveDiaries()">确定</el-button>
            </div>
        </el-dialog>  
        <!---------------- 新增标签弹层-------------------- -->     
    </div>
</template>

<script>
// 导入接口
import DiariesManageAPI from '@/api/personalDiaries'
export  default{
    data() {
            return {
                dialogFormVisible: false,//添加表单是否可见
                dialogFormVisible4Edit:false,//编辑表单是否可见
                formLabelWidth: '50px', // 根据需要设置合适的宽度
                formData: {},//表单数据
                total: 0,
                searchModel:{
                    pageNo: 1,
                    pageSize: 10
                },
              
                dataList: [],  //当前页要展示的列表数据
                rules: {// 校验规则
                DiariesName: [{ required: true, message: '角色为必填项', trigger: 'blur' }],
                DiariesDesc: [{ required: true, message: '角色描述为必填项', trigger: 'blur' }]
                }
            }

        },
        methods:{
           //添加    -- this.$refs.DiariesFormRef.validate((valid)=>{ ---数据验证
           saveDiaries() {
                //触发表单验证
                this.$refs.DiariesFormRef.validate((valid)=>{ 
                    if(valid){
                        DiariesManageAPI.savepersonalDiaries(this.formData).then(response =>{
                        // 成功提示
                        this.$message.success(response.msg);
                        // 关闭对话框
                        this.dialogFormVisible = false;
                        this.clearForm();
                        // 刷新表格
                        this.getDiariesList();
                        })
                    }else{
                        console.log("error submit!!");
                        return false;
                    }
                
                });
            },

            //取消
            cancel() {
                this.dialogFormVisible = false;
                this.$message.success("操作取消！");
            },
            // 删除
            handleDelete(Diaries) {
                
                this.$confirm("次操作永久删除，是否继续？", "提示", {   //confirm  防手抖
                    type: "info"
                }).then(() => {
                    DiariesManageAPI.delletepersonalDiaries(Diaries.id).then(response =>{
                        console.log(response)
                        if (response.msg=='success') { //判断当前操作是否成功
                            this.$message.success("删除成功！");
                        } else {
                            this.$message.error("数据同步失败,自动刷新");
                        }
                    }).finally(() => {
                        //2.重新加载数据
                        this.getDiariesList();
                    });
                }).catch(() => {
                    this.$message.info("取消操作");
                });
            },

        
            //查询所有
            getDiariesList(){
            DiariesManageAPI.getDiariesList(this.searchModel).then(response=>{ 
                this.dataList=response.data.rows;
                this.total=response.data.total;
             
            });
           },
           //分页
           handleSizeChange(pageSize){
            this.searchModel.pageSize=pageSize
            this.getDiariesList();
           },
           handleCurrentChange(pageNo){
            this.searchModel.pageNo=pageNo
            this.getDiariesList();
           },
          
            //弹出添加窗口
            openEditUI(id) {
                if( id==null){
                this.title='新增角色'
                }else{
                    this.title='修改角色'
                    //根据id查找角色
                    DiariesManageAPI.getpersonalDiariesById(id).then(response=>{ 
                        this.formData=response.data
                        //this.$refs.menuRef.setCheckedKeys(response.data.menuIdList);
                 });
                } 
                this.dialogFormVisible = true;
                this.clearForm = true;
            },
            cancel() {
                this.dialogFormVisible = false;
                this.$message.success("操作取消！");
            },
           

            //重置表单
            clearForm() {
                this.formData = {};
                this.$refs.DiariesFormRef.clearValidate();
                    
            },
        },
        
        //钩子函数，VUE对象初始化完成后自动执行
        created(){
            this.getDiariesList();
            //this.getAllMenu();
        }
};
</script>
<style>
#search .el-input__inner {
    width: 200px;
    margin-right: 10px;
}
</style>
